<template>
  <div class="page" >
    <div class="tools-bar">
      <template>
        <el-select v-model="value" placeholder="状态">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </template>
      <template>
        <el-select v-model="value1" placeholder="角色">
          <el-option
            v-for="item in options1"
            :key="item.value1"
            :label="item.label1"
            :value="item.value1">
          </el-option>
        </el-select>
      </template>
      <div class="left-wrap" style="margin-left: 20%">
        <el-input prefix-icon="el-icon-search" placeholder="请输入关键字" size="small" v-model="searchKey"></el-input>
        <el-button type="primary" size="small" @click="handleAddUser">新增</el-button>
        <el-button size="small" type="primary" @click="handleSearch">查询</el-button>
      </div>
    </div>
    <!--<div style="margin-top: 0%;width: 30%;float: left">-->
    <!--<div :span="4" style="float: left;width: 30%" >-->
      <!--<el-row>-->
        <!--<el-button type="primary" @click="() => append(data)">添加</el-button>-->
        <!--<el-button type="primary">编辑</el-button>-->
        <!--<el-button type="primary" @click="() => remove(node, data)">删除</el-button>-->
      <!--</el-row>-->
      <!--<div style="margin-top: 10%">-->
      <!--<el-tree-->
        <!--ref = "eltree"-->
        <!--:data="data"-->
        <!--node-key="id"-->
        <!--default-expand-all-->
        <!--:default-checked-keys = "[1,2,3,4,5,6]"-->
        <!--@node-click="checkchange"-->
        <!--:expand-on-click-node="false"-->
        <!--:props="defaultProps">-->
      <!--</el-tree>-->
      <!--</div>-->
    <!--</div>-->
    <div class="custom-tree-container" style="width: 30%; float: left">
      <div class="block">
        <el-tree
          ref = "eltree"
          :data="data"
          node-key="id"
          :default-checked-keys = "[1,2,3,4,5,6]"
          @node-click="checkchange"
          default-expand-all
          :props="defaultProps"
          :expand-on-click-node="false">
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span>{{ node.label }}</span>
        <!--@click="() => append(data)"-->
        <span>
          <el-button
            type="text"
            size="mini"
            @click="() => open4(data)">
            编辑
          </el-button>
          <el-button
            type="text"
            size="mini"
            @click="() => open3(data)">
            添加
          </el-button>
          <el-button
            type="text"
            size="mini"
            @click="() => remove(node, data)">
            删除
          </el-button>
        </span>
      </span>
        </el-tree>
      </div>
    </div>
    <!--style="width:65%;float: left"-->
    <div :span="8" style="float: left;width: 67%">
    <el-table
      :data="tableData5">
      <el-table-column
        prop="name"
        label="姓名">
      </el-table-column>
      <el-table-column
        prop="username"
        label="用户名">
      </el-table-column>
      <el-table-column
        prop="mobile"
        label="手机号码">
      </el-table-column>
      <el-table-column
        prop="userId"
        label="用户ID">
      </el-table-column>
      <el-table-column
        prop="isDelete"
        label="状态">
        <template slot-scope="scope">
          <el-tag size="small" type="info">
            禁用
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="handleEdit(scope.row)">修改</el-button>
          <el-button type="text" size="small">启用</el-button>
        </template>
      </el-table-column>
    </el-table>
    </div>
    <pagination ref="pageInfo" :total="pageInfo.totalElements" :page.sync="pageInfo.currentPage" @pagination="pagination"></pagination>
    <el-dialog title="新增用户" :visible.sync="dialogFormVisible1">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
        <!--<el-form-item label="角色ID" prop="userId">-->
          <!--<el-input v-model="ruleForm.userId" value='' ref='userId'></el-input>-->
        <!--</el-form-item>-->
        <el-form-item label="密码" prop="password">
          <el-input v-model="ruleForm.password" value='' ref='password'></el-input>
        </el-form-item>
        <el-form-item label="用户名称" prop="username">
          <el-input v-model="ruleForm.username" value='' ref='username'></el-input>
        </el-form-item>
        <el-form-item label="部门ID" prop="deptId">
          <el-input v-model="ruleForm.deptId" value='' ref='deptId'></el-input>
        </el-form-item>
        <el-form-item label="电子邮箱" prop="email">
          <el-input v-model="ruleForm.email" value='' ref='email'></el-input>
        </el-form-item>
        <el-form-item label="手机号码" prop="mobile">
          <el-input v-model="ruleForm.mobile" value='' ref='mobile'></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="submit">提 交</el-button>
      </div>
    </el-dialog>
    <el-dialog title="编辑用户" :visible.sync="dialogFormVisible">
      <el-form :model="ruleForm1" :rules="rules1" ref="ruleForm1">
        <el-form-item label="用户ID" prop="userId">
          <el-input v-model="ruleForm1.userId" value='' ref='userId'></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="ruleForm1.password" value='' ref='password'></el-input>
        </el-form-item>
        <el-form-item label="用户名称" prop="username">
          <el-input v-model="ruleForm1.username" value='' ref='username'></el-input>
        </el-form-item>
        <el-form-item label="部门ID" prop="deptId">
          <el-input v-model="ruleForm1.deptId" value='' ref='deptId'></el-input>
        </el-form-item>
        <el-form-item label="电子邮箱" prop="email">
          <el-input v-model="ruleForm1.email" value='' ref='email'></el-input>
        </el-form-item>
        <el-form-item label="手机号码" prop="mobile">
          <el-input v-model="ruleForm1.mobile" value='' ref='mobile'></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit2">提 交</el-button>
      </div>
    </el-dialog>
    <el-dialog title="添加部门" :visible.sync="dialogFormVisible2">
      <el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2">
        <el-form-item label="父级部门ID" prop="parentId">
          <el-input v-model="ruleForm2.parentId" value='' ref='parentId' :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="部门名称" prop="name">
          <el-input v-model="ruleForm2.name" value='' ref='name'></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="submit3">提 交</el-button>
      </div>
    </el-dialog>
    <el-dialog title="编辑部门" :visible.sync="dialogFormVisible3">
      <el-form :model="ruleForm3" :rules="rules3" ref="ruleForm3">
        <el-form-item label="部门ID" prop="deptId">
          <el-input v-model="ruleForm3.deptId" value='' ref='deptId' :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="部门名称" prop="name">
          <el-input v-model="ruleForm3.name" value='' ref='name'></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible3 = false">取 消</el-button>
        <el-button type="primary" @click="submit4">提 交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {api} from '@/utils'
  import { pagination } from '@/components'
  import {validatePhone,validateEMail} from '@/utils/validate'
  let id = 1000;

  export default {
    methods: {
      listReset(result,result0){
        let arr = [];
        let hasChild = false;
        result.forEach(r => {
          arr.push(r);
          if(r.children.length > 0)
            hasChild = true;
        });
        result0.push(arr);
        if(hasChild)
          this.ergodicChildren(result0)
      },
      ergodicChildren(result0) {
        let arr = [];
        let hasChild = false;
        let result = result0[result0.length - 1];
        result.forEach(r => {
          r.children.forEach(t => {
            arr.push(t);
            if(t.children.length > 0)
              hasChild = true;
          })
        });
        result0.push(arr);
        if(hasChild)
          this.ergodicChildren(result0);
      },
      cleanForm(data) {
        Object.keys(data).forEach(function (key) {
          data[key] = ''
        })
      },
      pagination(e) {
        let params = {};
        params.pageNum = e.page;
        params.pageSize = e.limit;
        this.getData(params)
      },
      open3(data) {
        console.log('data110',data);
        this.ruleForm2.parentId = data.parentId;
        this.open3Tree = data;
        this.dialogFormVisible2 = true;
        this.cleanForm(this.ruleForm)
      },
      open4(data) {
        this.open4Tree = data;
        this.ruleForm3.deptId = data.deptId;
        this.ruleForm3.name = data.name;
        this.dialogFormVisible3 = true;
        this.cleanForm(this.ruleForm)
      },
      submit4(data){
        console.log('this.open4Tree',this.open4Tree);
        let tree = this.open4Tree;
        console.log('tree111111',tree);
        // let deptId = this.tree.deptId;
        let name = this.$refs.name.value;
        this.$axios.request({
          url: api.insertAndUpdateDept,
          method: 'post',
          params: {
            deptId:tree.deptId,
            // parentId: tree.parentId,
            name:name
          }
        }).then(data => {
          let result = data.data;
          if (data.success === true) {
            console.log('result111111',result);
            this.parentId = data.parentId;
            this.$message({
              message: '保存成功',
              duration: 2000,
              type: 'success'
            });
            this.dialogFormVisible3 = false;
            this.getData();
          } else {
            this.$message({
              message: '保存失败',
              duration: 2000,
              type: 'error'
            })
          }
        });
        return false;
      },
      submit(data) {
        let params = {
          //userId : this.$refs.userId.value,
          password : this.$refs.password.value,
          username : this.$refs.username.value,
          deptId : this.$refs.deptId.value,
          email : this.$refs.email.value,
          mobile : this.$refs.mobile.value
        };
        console.log('submit',params);
        this.$axios.request({
          url: api.insertAndUserStatus,
          method: 'post',
          params: params
        }).then(data => {
          if (data.success === true) {
            console.log('info',data);
            this.dialogFormVisible1 = false;
            this.tableData5 = data.data;
            this.$message({
              message: '保存成功',
              type: 'success'
            });
          } else {
            this.$message({
              message: '请求失败',
              duration: 2000,
              type: 'error'
            })
          }
        })
      },
      submit2(data) {
        let params = {
          userId : this.$refs.userId.value,
          password : this.$refs.password.value,
          username : this.$refs.username.value,
          deptId : this.$refs.deptId.value,
          email : this.$refs.email.value,
          mobile : this.$refs.mobile.value
        };
        this.$axios.request({
          url: api.insertAndUserStatus,
          method: 'post',
          params: params
        }).then(data => {
          if (data.success === true) {
            console.log('info',data);
            this.dialogFormVisible = false;
            this.tableData5 = data.data;
            this.$message({
              message: '保存成功',
              type: 'success'
            });
          } else {
            this.$message({
              message: '请求失败',
              duration: 2000,
              type: 'error'
            })
          }
        })
      },
      getData(param) {
        this.$axios.request({
          url: api.listmenutree,
          method: 'post',
        }).then(data => {
          if (data.success === true) {
            // console.log('listmenutree',JSON.stringify(data.data));
            let result = data.data;
            //let select = [];
            let result0 = [];
            this.listReset(result,result0);
            let id = 0;
            result0.forEach(r => {
              r.forEach(t => {
                id ++;
                t.id = id;
                t.label = t.name;
              })
            });
            console.log('result0',result);
            this.data = result;
          } else {
            this.$message({
              message: '请求失败',
              duration: 2000,
              type: 'error'
            })
          }
        });

        this.$axios.request({
          url: api.getDeptIdUser,
          method: 'post',
          params: {
            deptId:'001'
          }
        }).then(data => {
          if (data.success === true) {
            // console.log('asdfasd',data);
            this.tableData5 = data.data;
          } else {
            this.$message({
              message: '请求失败',
              duration: 2000,
              type: 'error'
            })
          }
        });
      },
      handleAddUser() {
        this.dialogFormVisible1 = true;
        this.cleanForm(this.ruleForm)
      },
      handleSearch() {
        let params = {};
        params.id = this.searchKey;
        console.log('params',params.id);
        this.getData(params);
      },
      handleEdit() {
        this.dialogFormVisible = true;
        this.cleanForm(this.ruleForm1)
      },
      checkchange(data) {
        console.log(111,data);
        let deptId = data.deptId;
        this.$axios.request({
          url: api.getDeptIdUser,
          method: 'post',
          params: {
            deptId:deptId
          }
        }).then(data => {
          if (data.success === true) {
            console.log('asdfasd',data);
            this.tableData5 = data.data;
          } else {
            this.$message({
              message: '请求失败',
              duration: 2000,
              type: 'error'
            })
          }
        });
        },
      append(data) {
        const newChild = { id: id++, label: 'test', children: [] };
        if (!data.children) {
          this.$set(data, 'children', []);
        }
        data.children.push(newChild);
      },
      remove(node, data) {
        const parent = node.parent;
        const children = parent.data.children || parent.data;
        const index = children.findIndex(d => d.id === data.id);
        children.splice(index, 1);
      },
      submit3(data) {
        console.log('data11111',this.open3Tree);
        let tree = this.open3Tree;
        // let parentId = this.tree.parentId;
        let name = this.$refs.name.value;
        this.$axios.request({
          url: api.insertAndUpdateDept,
          method: 'post',
          params: {
            // deptId:deptId,
            parentId: tree.parentId,
            name:name
          }
        }).then(data => {
          let result = data.data;
          if (data.success === true) {
            console.log('result111111',result);
            this.parentId = data.parentId;
            this.$message({
              message: '保存成功',
              duration: 2000,
              type: 'success'
            });
            this.dialogFormVisible2 = false;
            this.getData();
          } else {
            this.$message({
              message: '保存失败',
              duration: 2000,
              type: 'error'
            })
          }
        });
            return false;
      }
    },
    data() {
      return {
        tableData5: [],
        pageInfo: {
          totalElements: 0,
          currentPage: 1
        },
        ruleForm:{
          userId:'',
          password:'',
          username:'',
          deptId:'',
          email:'',
          mobile:'',
        },
        ruleForm1:{
          userId:'',
          password:'',
          username:'',
          deptId:'',
          email:'',
          mobile:'',
        },
        ruleForm2:{
          parentId:'',
          name:'',
        },
        ruleForm3:{
          deptId:'',
          name:''
        },
        rules:{
          userId:[
            { required: true, message: '请输入角色ID', trigger: 'blur' }
          ],
          password:[
            { required: true, message: '请输入密码', trigger: 'blur' }
          ],
          username:[
            { required: true, message: '请输入角色名称', trigger: 'blur' }
          ],
          deptId:[
            { required: true, message: '请输入部门ID', trigger: 'blur' }
          ],
          email:[
            { required: true, message: '请输入电子邮箱', trigger: 'blur' },
            { validator:validateEMail, message:'请输入正确的邮箱地址', trigger:'blur'}
          ],
          mobile:[
            { required: true, message: '请输入手机号码', trigger: 'blur' },
            { validator:validatePhone, message:'手机号码格式不正确', trigger: 'blur' }
          ]
        },
        rules1:{
          userId:[
            { required: true, message: '请输入角色ID', trigger: 'blur' }
          ],
          password:[
            { required: true, message: '请输入密码', trigger: 'blur' }
          ],
          username:[
            { required: true, message: '请输入角色名称', trigger: 'blur' }
          ],
          deptId:[
            { required: true, message: '请输入部门ID', trigger: 'blur' }
          ],
          email:[
            { required: true, message: '请输入电子邮箱', trigger: 'blur' },
            { validator:validateEMail, message:'请输入正确的邮箱地址', trigger:'blur'}
          ],
          mobile:[
            { required: true, message: '请输入手机号码', trigger: 'blur' },
            { validator:validatePhone, message:'手机号码格式不正确', trigger: 'blur' }
          ]
        },
        rules2:{
          parentId:[
            { required: true, message: '请输入父级部门ID', trigger: 'blur' }
          ],
          name:[
            { required: true, message: '请输入部门名称', trigger: 'blur' }
          ],
        },
        rules3:{
          deptId:[
            { required: true, message: '请输入部门ID', trigger: 'blur' }
          ],
          name:[
            { required: true, message: '请输入角色ID', trigger: 'blur' }
          ],
        },
        dialogFormVisible1:false,
        dialogFormVisible:false,
        dialogFormVisible2:false,
        dialogFormVisible3:false,
        data:[],
        defaultProps: {
          children: 'children',
          label: 'label'
        },
        searchKey:'',
        options: [{
          value: '选项1',
          label: '禁用'
        }, {
          value: '选项2',
          label: '启用'
        }],
        value: '',
        options1: [{
          value1: '选项1',
          label1: '超级管理员'
        }, {
          value1: '选项2',
          label1: '新闻管理员'
        },{
          value1: '选项3',
          label1: '财务人员'
        },{
          value1: '选项4',
          label1: '市场管理员'
        }],
        value1: '',
      }
      const data = [{
        id: 1,
        label: '一级 1',
        children:[{
          id: 4,
          label: '二级 1-1',
        }]
      }]
    },
    components: {
      pagination
    },
    mounted () {
      this.getData()
    }
  };
</script>

<style scoped>
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
</style>
